<template>
  <main class="bottom-content">
    <c-card class="bottom-content" title="不同倍率区间病例数占比发展趋势">
      <a class="change-btn" href="#" slot="title-right" @click="changeMultiplying">修改倍率区间></a>
      <multiplying-chart :barData="multiplyingBarData" height="600px"/>
    </c-card>
    <a-modal v-model="visible" :title="false" :footer="false" :close="false" width="640px">
      <img slot="closeIcon" src="@/assets/images/icon/close.png" alt="">
      <changeMultiplying ref="changeMultiplying" :visible.sync="visible"/>
    </a-modal>
  </main>
</template>

<script lang="ts">
import multiplyingChart from "./multiplyingChart.vue";
import changeMultiplying from "./changeMultiplying.vue";
import {differentIntervalsHighAndLowRateAnalysis} from "@/api/drgsGroupResults.js";
import {getPercent} from "@/utils/transform.js"

export default {
  components: {multiplyingChart, changeMultiplying},
  inject: {
    timeParamsFormParent: {
      type: Object,
      default: () => ({})
    },
    getTimeParamsFormParent: {
      type: Object,
      default: () => () => ({})
    }
  },
  data() {
    return {
      multiplyingBarData: {
        xAxis: [],
        dataList: [
          {
            series: {name: '0＜倍率＜0.4', type: 'bar', itemStyle: {color: "#BF3330"}},
            dataKey: "lowestCount",
            data: []
          },
          {
            series: {name: '0.4≤倍率＜2.2', type: 'bar', itemStyle: {color: "#A14264"}},
            dataKey: "lowerCount",
            data: [],
          },
          {
            series: {name: '2.2≤倍率＜3.5', type: 'bar', itemStyle: {color: "#81529B"}},
            dataKey: "midCount",
            data: [],
          },
          {
            series: {name: '3.5≤倍率≤5.5', type: 'bar', itemStyle: {color: "#6958C2"}},
            dataKey: "highCount",
            data: [],
          },
          {
            series: {name: '5.5＜倍率', type: 'bar', itemStyle: {color: "#5467E6"}},
            dataKey: "highestCount",
            data: [],
          },
        ]
      },
      visible: false,
      baseData: null
    }
  },
  computed: {
    reactiveTimeParamsFormParent() {
      return this.getTimeParamsFormParent();
    }
  },
  watch: {
    reactiveTimeParamsFormParent() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeMultiplying() {
      this.visible = true;
    },
    getData() {
      this.getDifferentIntervalsHighAndLowRateAnalysis();
    },
    async getDifferentIntervalsHighAndLowRateAnalysis() {
      const params = {
        ...this.reactiveTimeParamsFormParent
      }
      const res = await differentIntervalsHighAndLowRateAnalysis(params);
      if (res.data instanceof Array && res.data.length > 0) {
        this.baseData = res['data'];
        this.compileChartDataByDifferentIntervalsHighAndLowRateAnalysis();
      } else {
        console.warn('接口：differentIntervalsHighAndLowRateAnalysis；数据返回异常')
      }
    },
    compileChartDataByDifferentIntervalsHighAndLowRateAnalysis() {
      this.multiplyingBarData.xAxis = this.baseData.map(item => item.months);
      this.multiplyingBarData.dataList = this.multiplyingBarData.dataList.map((item, index) => ({
        ...item,
        data: this.baseData.map(mItem => Number(getPercent(mItem[item.dataKey], mItem['countNum']).replace('%', '')))
      }))
    }
  }
}
</script>

<style scoped lang="stylus">
.change-btn {
  cursor pointer
  font-size: 12px;
  color: #4B82FB;
  text-align: right;
  font-weight: bold;
  line-height: 12px;
}
</style>
